<template>
	<div class='user_projects'>
		<el-container>
		      <el-header>
				  <el-menu
				      :default-active="$route.path"
				      mode="horizontal"
				      :ellipsis="false"
				      @select="handleSelect"
				    >
				      <el-menu-item index="0">
				        <div class='logo' style="background-color: skyblue; width: 160px;">
				        	<img src="../../assets/images/logo_B.png" >
				        	<label style="color: white;"><i>测试平台</i></label>
				        </div>
				      </el-menu-item>
				  	<el-menu-item index='/myProjects' @click='toMyProject'>我的项目</el-menu-item>
				    <el-menu-item index='/project/list' @click='toProjectList'>项目列表</el-menu-item>
					<el-menu-item index='/project/appeal' @click='toProjectAppeal'>我的项目申请</el-menu-item>
					<el-menu-item index='/project/myAppeal' @click='toProjectMyAppeal'>我申请的项目</el-menu-item>
				  	<div class="flex-grow" />
				  	<el-dropdown @command="handleCommand" class='header_user' >
				  		  <span style="color: #409eff; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 28px;">{{ user_name }}
				  			  <el-icon size="16" style="position: relative; top: 3px;"><arrow-down /></el-icon>
				  		  </span>
				  		  <template #dropdown>
				  			<el-dropdown-menu>
				  			  <el-dropdown-item command="2" >退出登录</el-dropdown-item>
				  			</el-dropdown-menu>
				  		  </template>
				  	</el-dropdown>
				  </el-menu>
			  </el-header>
		      <el-main>
				  <router-view></router-view>
			  </el-main>
		    </el-container>
		
	</div>
</template>

<script>
	
import {mapState, mapActions} from 'vuex'

export default {
	data() {
		return {
			env_list: [],
			value: '',
			defaultPath: '/myProjects'
		}
	},
	methods:{
		handleCommand(command){
			this.$router.push({name: 'login'})
		},
		toMyProject(){
			this.$router.push({name: 'myProject'})
			this.defaultPath = '/myProjects'
		},
		toProjectList(){
			this.$router.push({name: 'projectList'})
			this.defaultPath = '/project/list'
		},
		toProjectAppeal(){
			this.$router.push({name: 'projectAppeal'})
			this.defaultPath = '/project/appeal'
		},
		toProjectMyAppeal(){
			this.$router.push({name: 'myAppeal'})
			this.defaultPath = '/project/myAppeal'
		}
	},
	created(){
	},
	computed:{
		...mapState(['user_id', 'user_name'])
	},
}
</script>

<style scoped>
	.flex-grow {
	  flex-grow: 1;
	}
	.header .header_user:hover {
	  cursor: pointer;
	}
	.user_projects .header_user{
		height: 30px;
		outline: none;
		position: relative;
		top: 13px;
		right: 40px;
	}
	.header_user :focus-visible {
		outline: none;
	}
	/deep/ .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb{
	    width: 0px !important;
		left: 500px !important;
	}
</style>